<template>
  <div class="test">
    <h2>test新增页面</h2>
    <el-form :model="tutorial" label-width="120px">
      <el-form-item label="课程名称">
        <el-input v-model="tutorial.title" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="tutorial.description" />
      </el-form-item>
      <el-form-item label="是否公开">
        <el-select v-model="tutorial.published" placeholder="公开课程">
          <el-option label="是" :value="true" />
          <el-option label="否" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import tutorialDataApi from '../../api/tutorialDataApi.js'
import { reactive, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
//所有的生命周期用法均为回调函数
onMounted(() => {
  // 获取传参
  console.log(route.params)
  console.log(route.query)
})
// 销毁实例变为onUnmounted，与vue2的destroy作用一致
onUnmounted(() => {
  console.log('我销毁了')
})
const tutorial = reactive({
  title: '',
  description: '',
  published: false
})
const submit = () => {
  let url = `api/api/tutorials`
  tutorialDataApi
    .created(tutorial)
    .then(res => {})
    .catch(res => {})
}
</script>
<style lang="less" scoped></style>
